<template>
    <div>
        <div v-for="items in list">
            <h3 align="center" style="margin-top: 10px;">{{items.planType == 'ZC' ? '装船' : '卸船'}}理箱清单</h3>
            <el-row style="margin-top: 20px;">
                <el-col :span="8"><div class="grid-content bg-purple">船代:{{items.accountUnit}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple-light">结算月度:{{items.accountMonth}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">发生日期:{{items.closeTime}}</div></el-col>
            </el-row>
            <el-row style="margin-top: 20px;">
                <el-col :span="8"><div class="grid-content bg-purple">船名:{{items.shipName}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple-light">航次:{{items.voyage}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">封航日期:{{items.closeTime}}</div></el-col>
            </el-row>
            <table border="1" cellspacing="0" style="width: 800px;margin-top: 20px;">
                <tr style="text-align: center">
                    <td>箱号</td>
                    <td>箱型</td>
                    <td>尺寸</td>
                    <td>内外贸</td>
                    <td>空重</td>
                    <td>中转</td>
                    <td v-if="'ZC'===items.planType">装箱方式</td>
                    <td>铅封号</td>
                    <td>提单号</td>
                    <td v-if="'ZC'===items.planType">装船位置</td>
                    <td>货名</td>
                    <td>件数</td>
                </tr>
                <tr v-for="item in items.detailData" style="text-align: center">
                    <td>{{item.containerId}}</td>
                    <td>{{item.containerType}}</td>
                    <td>{{item.containerSize}}</td>
                    <td>{{item.tradeType}}</td>
                    <td>{{item.ef}}</td>
                    <td>{{item.change}}</td>
                    <td v-if="'ZC'===items.planType">{{(item.enchaseWay == "" || item.enchaseWay == null) ? item.enchaseWay : item.enchaseWay == 'GZ' ? '港装' : '厂装'}}</td>
                    <td>{{item.sealNo}}</td>
                    <td>{{item.billNumber}}</td>
                    <td v-if="'ZC'===items.planType">{{item.loadPosition}}</td>
                    <td>{{item.cargoName}}</td>
                    <td>{{item.cargoCount}}</td>
                </tr>
                <tr style="text-align: center; font-weight: bold;" v-if="'ZC'===items.planType">
                    <td>合计</td>
                    <td></td>
                    <td>{{items.totalnum}}</td>
                    <td colspan="4"></td>
                    <td colspan="4">{{items.num20 }}*20,{{items.num40}}*40,{{items.num45}}*45,T={{items.totalteu}}</td>
                    <td></td>
                </tr>
                <tr style="text-align: center; font-weight: bold;" v-else>
                    <td>合计</td>
                    <td></td>
                    <td>{{items.totalnum}}</td>
                    <td colspan="3"></td>
                    <td colspan="3">{{items.num20 }}*20,{{items.num40}}*40,{{items.num45}}*45,T={{items.totalteu}}</td>
                    <td></td>
                </tr>
            </table>
            <div style="page-break-after:always"></div>
        </div>
    </div>
</template>

<script>
    import { balanceDetail } from "@/api/shipPlan/shipPlan";

    export default {
        name: "detail",
        data() {
            return {
                list: []
            }
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                const id = this.$route.params.id
                balanceDetail(id, {}).then(res => {
                    this.list = res.data.aaData
                    this.$nextTick(() => {
                        window.print()
                        window.close();
                    })
                })
            }
        },
        filters: {
            filterDate(val) {
                return val ? val.substr(0, 10) : ''
            }
        }
    }
</script>

<style scoped>

</style>
